<html>
<head>
</head>
<body>
	<canvas id="canvas" width="160" height="160" style="border:1px solid #000;"></canvas>
	<b><span id="state"/></b>
	<script>
		var Grid = {
			size: 20,
			data: null,
			ctx: null, 
			clear: function() {
				Grid.data = [];
				for (var y=0;y<8;y++) {
					Grid.data.push([0,0,0,0,0,0,0,0]);
				}
			},
			lines : function(ctx) {
				for (var i=0;i<160;i+=Grid.size) {
					ctx.moveTo(i,0);
					ctx.lineTo(i,160);
					ctx.stroke();
					ctx.moveTo(0,i);
					ctx.lineTo(160,i);
					ctx.stroke();
				}
			},
			draw : function(ctx) {
				var text = "";
				for (var y=0;y<8;y++) {
					var value = 0;
					for (var x=0;x<8;x++) {
						if (Grid.data[y][x] == 1) {
							ctx.fillStyle="#FF0000";
							value += (1<<x);
						} else {
							ctx.fillStyle="#FFFFFF";
						}
						ctx.fillRect(x*Grid.size,y*Grid.size, (x+1)*Grid.size, (y+1)*Grid.size);
					}
					text += (y>0?",":"")+"0x"+value.toString(16);
				}
				
				document.getElementById("state").innerText = "{"+text+"}";
			},
			onClick: function(e) {
				var x = e.clientX - 12;
				var y = e.clientY - 12;
				
				var ix = Math.floor(x / Grid.size);
				var iy = Math.floor(y / Grid.size);
				
				if (ix < 0 || ix > 7 || iy < 0 || iy > 7) {
					console.log("Outside:", x, y);
					return;
				}
				
				Grid.data[iy][ix] = 1 - Grid.data[iy][ix];
				
				if (Grid.ctx != null) {
					Grid.draw(Grid.ctx);
					Grid.lines(Grid.ctx);
				}
			}
		};
	
		var c=document.getElementById("canvas");
		Grid.ctx=c.getContext("2d");
		c.addEventListener("click", Grid.onClick, false);
		
		Grid.clear();
		Grid.draw(Grid.ctx);
		Grid.lines(Grid.ctx);
	</script>
</body>
</html>